<template>
  <div>
    <div class="n-layout-page-header">
      <n-card :bordered="false" title="工时申报"></n-card>
    </div>
    <n-card :bordered="false" class="mt-4 proCard">
      <n-form :model="fromValues" :rules="rules" ref="formRef" label-placement="top" :label-width="120" class="py-4">
        <n-form-item label="所属项目" path="projectId">
           <n-select v-model:value="fromValues.projectId" placeholder="请选择所属项目" :options="projectList" label-field="projectName" value-field="id"/>
        </n-form-item>
        <n-form-item label="申报日期" path="declareDate">
           <n-date-picker style="width: 100%;" v-model:value="fromValues.declareDate" value-format="yyyy-MM-dd" type="date" placeholder="请选择申报日期"/>
        </n-form-item>
         <n-form-item label="消耗工时" path="workingHours">
           <n-input-number style="width: 100%;" placeholder="请输入消耗工时" v-model:value="fromValues.workingHours" :max="24" :min="0" :step="0.1" />
         </n-form-item>
        <n-form-item label="备注信息" path="remark">
           <n-input maxlength="300" show-count type="textarea" :autosize="{
              minRows: 3,
              maxRows: 5
            }" v-model:value="fromValues.remark" filterable placeholder="请输入备注信息" />
        </n-form-item>
      </n-form>
      <div style="justify-content: end;display: flex;">
        <n-space>
          <n-button ghost icon-placement="left" @click="handleCloseModel">
            取消
          </n-button>
          <n-button type="primary" :loading="formBtnLoading" @click="confirmForm">提交</n-button>
        </n-space>
      </div>
    </n-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive ,unref,onMounted} from 'vue';
import { useMessage, type FormRules } from 'naive-ui';
import { ResultEnum } from '@/enums/httpEnum';
import { declare } from '@/api/working/record';
import { list } from '@/api/working/project';
import { formatToDate } from '@/utils/dateUtil';
const formBtnLoading = ref<boolean>(false);
const formRef: any = ref(null);
const message = useMessage();
const projectList = ref<any>();
type Record = {
  id: number | null;
  projectId: number | null;
  declareDate: any | null;
  workingHours: number | null;
  remark: string;
};
const defaultValueRef: () => Record = () => ({
  id: null,
  projectId: null,
  declareDate: null,
  workingHours: null,
  remark: ''
});
let fromValues = reactive(defaultValueRef());
const rules: FormRules = {
  projectId: {
    type: 'number',
    required: true,
    trigger: ['blur', 'select'],
    message: '请选择项目',
  },
  workingHours: {
    required: true,
    type: 'number',
    trigger: ['blur', 'change'],
    message: '请输入工时'
  },
  declareDate:{
    type: 'date',
    required: true,
    trigger: ['blur', 'select'],
    message: '请选择申报日期',
  },
}
/**
 * 关闭model,重置数据
 */
const handleCloseModel = () => {
  resetFrom();
}

/**
 * 确认表单
 */
const confirmForm = (e:any) => {
  e.preventDefault();
    formRef.value.validate(async (errors) => {
        if (!errors) {
            formBtnLoading.value = true;
            fromValues.declareDate = formatToDate(new Date(fromValues.declareDate));
            const data =  await declare(fromValues);
            if (data.code !== ResultEnum.SUCCESS) {
                const resultMsg = data.data ? data.data : '';
                message.error(data.msg + '-' + resultMsg);
                formBtnLoading.value = false;
            }
            if (data.code === ResultEnum.SUCCESS) {
                message.success(data.msg);
                formBtnLoading.value = false;
                resetFrom();
            }
        } else {
            message.error('请填写完整信息');
        }
    });
}

const resetFrom = () =>{
  fromValues = Object.assign(unref(fromValues), defaultValueRef());
}

onMounted(async () => {
  projectList.value = await list({});
});
</script>

<style lang="less" scoped></style>
